<template>
  <div>
    <div id="main" style="width: 100%;height: 500px;"></div>
    <b-table
      icon-pack="fa"
      paginated
      per-page="15"
      :data="data"
      aria-next-label="Next page"
      aria-previous-label="Previous page"
      aria-page-label="Page"
      aria-current-label="Current page"
      :columns="columns"></b-table>
  </div>
</template>

<script>
  var echarts = require('echarts');
  export default {
    name: 'HelloWorld',
    data() {
      return {
        data: [],
        columns: [
          {
            field: 'id',
            label: 'ID',
            width: '40',
            numeric: true
          },
          {
            field: 'height',
            label: '块高',
          },
          {
            field: 'hash',
            label: 'hash尾数',
          },
          {
            field: 'time',
            label: '时间',
            centered: true
          },
        ]
      }
    },
    methods: {
      get_history_data() {
        let api = "/api/history";
        this.axios.get(api).then(r => {
          console.log(r.data)
          this.data = r.data.data
          let arr_data = []
          for (let i in r.data["100"].num) {
            arr_data.push(r.data["100"].num[i])
          }
          console.log(r.data["100"].num)
          console.log(arr_data)
          this.get_100(arr_data)
        })
      },
      get_100(arr_data) {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '80-89', '90-99']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: arr_data
          }]
        });
      }
    },
    mounted() {
      this.get_history_data();
      this.get_100();
    }
  }
</script>
